<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tip Test Page</title>
<script src="../lib/simple.js"></script>
<script src="../plugins/Tip.js"></script>
<style>
body {font-size:11px}
</style>
<script>
$(function () {
	var tip1 = new $.Tip({
		$cnt : $('#tip')	
	});
	$('#ul1 li a').method('mouseenter', function (event){
		tip1.show(event, this);	
	}).method('mouseleave', function (){
		tip1.hide();
	});
	
	var tip2 = new $.Tip({
		$cnt : $('#tip'),
		process : function (elem) {
			return elem.innerHTML;	
		}	
	});
	$('#ul2 li a').method('mousemove', function (event) {
		tip2.follow(event, this);
	}).method('mouseleave', function () {
		tip2.hide();
	});
	
	var tip3 = new $.Tip({
		$cnt : $('#tip'),
		process : function (elem) {
			return elem.innerHTML;	
		},
		delay :0.2
	});
	$('#ul3 li a').method('mouseenter', function (event) {
		tip3.show(event, this);
	}).method('mouseleave', function () {
		tip3.hide();
	});
	
	var tip4 = new $.Tip({
		$cnt : $('#tip'),
		process : function (elem) {
			return elem.innerHTML;	
		},
		delay : 0.2,
		delayHide : 1
	});
	$('#ul4 li a').method('mouseenter', function (event) {
		tip4.show(event, this);
	}).method('mouseleave', function () {
		tip4.hide();
	});
});
</script>
<head>
<body>
<style>
#tip{
	border:1px solid #ccc;
	width:200px;
	background:#efefef;
	padding:20px 5px;
}
</style>
<ul id="ul1">
	<li><a href="#1">hello, everyone.</a></li>
	<li><a href="#1">my name is baboo.</a></li>
	<li><a href="#1">thanks to here.</a></li>
	<li><a href="#1">to listen my poem.</a></li>
	<li><a href="#1">that all.</a></li>
	<li><a href="#1">nothing.</a></li>
</ul>
<ul id="ul2">
	<li><a href="#1">hello, everyone.</a></li>
	<li><a href="#1">my name is baboo.</a></li>
	<li><a href="#1">thanks to here.</a></li>
	<li><a href="#1">to listen my poem.</a></li>
	<li><a href="#1">that all.</a></li>
	<li><a href="#1">nothing.</a></li>
</ul>
<ul id="ul3">
	<li><a href="#1">hello, everyone.</a></li>
	<li><a href="#1">my name is baboo.</a></li>
	<li><a href="#1">thanks to here.</a></li>
	<li><a href="#1">to listen my poem.</a></li>
	<li><a href="#1">that all.</a></li>
	<li><a href="#1">nothing.</a></li>
</ul>
<ul id="ul4">
	<li><a href="#1">hello, everyone.</a></li>
	<li><a href="#1">my name is baboo.</a></li>
	<li><a href="#1">thanks to here.</a></li>
	<li><a href="#1">to listen my poem.</a></li>
	<li><a href="#1">that all.</a></li>
	<li><a href="#1">nothing.</a></li>
</ul>
<div id="tip" style="display:none">
	
</div>
</body>
</html>
